<template>
  <div ref="chinaMap" class="china-map" />
</template>
<script>
import * as echarts from 'echarts'
import './china.js'
export default {
  data() {
    return {}
  },
  mounted() {
    var outname = [
      '南海诸岛',
      '北京',
      '天津',
      '上海',
      '重庆',
      '河北',
      '河南',
      '云南',
      '辽宁',
      '黑龙江',
      '湖南',
      '安徽',
      '山东',
      '新疆',
      '江苏',
      '浙江',
      '江西',
      '湖北',
      '广西',
      '甘肃',
      '山西',
      '内蒙古',
      '陕西',
      '吉林',
      '福建',
      '贵州',
      '广东',
      '青海',
      '西藏',
      '四川',
      '宁夏',
      '海南',
      '台湾',
      '香港',
      '澳门'
    ]
    var outvalue = [
      0, 524, 13, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 4, 31, 104, 36,
      1052, 33, 347, 9, 157, 22, 4, 18, 5, 2398, 41, 0, 484, 404, 22, 3, 5, 225
    ]
    var outdata = []

    var max = 6000
    var min = 1000
    var maxSize4Pin = 20
    var minSize4Pin = 10

    for (var i = 0; i < outname.length; i++) {
      outdata.push({
        name: outname[i],
        value: outvalue[i]
      })
    }

    var geoCoordMap = {}
    const chart = echarts.init(this.$refs.chinaMap)
    /* 获取地图数据*/
    var mapFeatures = echarts.getMap('china').geoJson.features
    //  console.log(mapFeatures)
    mapFeatures.forEach(function(v) {
      console.info(v)
      // 地区名称
      var name = v.properties.name
      // 地区经纬度
      geoCoordMap[name] = v.properties.cp
    })
    var convertData = function(outdata) {
      var res = []
      for (var i = 0; i < outdata.length; i++) {
        var geoCoord = geoCoordMap[outdata[i].name]
        if (geoCoord) {
          res.push({
            name: outdata[i].name,
            value: geoCoord.concat(outdata[i].value)
          })
        }
      }
      return res
    }

    const options = {
      // backgroundColor: '#0F1C3C',
      tooltip: {
        backgroundColor: 'rgba(0,0,0,.5)',
        textStyle: {
          color: '#fff'
        },
        formatter: function(params) {
          if (params.value.length > 1) {
            return (
              '&nbsp;&nbsp;' +
              params.name +
              '&nbsp;&nbsp;&nbsp;' +
              params.value[2] +
              '人&nbsp;&nbsp;'
            )
          } else {
            return (
              '&nbsp;&nbsp;' +
              params.name +
              '&nbsp;&nbsp;&nbsp;' +
              params.value +
              '人&nbsp;&nbsp;'
            )
          }
        }
      },

      geo: {
        map: 'china',
        show: true,
        roam: false,
        label: {
          emphasis: {
            show: false
          }
        },
        layoutSize: '100%',
        itemStyle: {
          normal: {
            borderColor: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#00F6FF'
                },
                {
                  offset: 1,
                  color: '#53D9FF'
                }
              ],
              false
            ),
            borderWidth: 3,
            shadowColor: 'rgba(10,76,139,1)',
            shadowOffsetY: 0,
            shadowBlur: 60
          }
        }
      },
      series: [
        {
          type: 'map',
          map: 'china',
          aspectScale: 0.75,
          // zoom:1.1,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#073684' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#061E3D' // 100% 处的颜色
                  }
                ]
              },
              borderColor: '#215495',
              borderWidth: 1
            },
            emphasis: {
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#073684' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#061E3D' // 100% 处的颜色
                  }
                ]
              }
            }
          },
          data: outdata
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          rippleEffect: {
            brushType: 'stroke'
          },
          showEffectOn: 'render',
          itemStyle: {
            normal: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(5,80,151,0.2)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(5,80,151,0.8)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,108,255,0.7)'
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          label: {
            normal: {
              show: false,
              color: '#fff',
              fontWeight: 'bold',
              position: 'inside',
              formatter: function(para) {
                return '{cnNum|' + para.data.value[2] + '}'
              },
              rich: {
                cnNum: {
                  fontSize: 13,
                  color: '#D4EEFF'
                }
              }
            }
          },
          symbol: 'circle',
          symbolSize: function(val) {
            if (val[2] === 0) {
              return 0
            }
            var a = (maxSize4Pin - minSize4Pin) / (max - min)
            var b = maxSize4Pin - a * max
            return a * val[2] + b * 1.2
          },
          data: convertData(outdata),
          zlevel: 1
        }
      ]
    }
    chart.setOption(options)
  }
}
</script>
<style lang="scss">
.china-map {
  width: 100%;
  height: 100%;
}
</style>
